<template>
  <div class="page_box" v-if="userArticle.resultSize !== 0">
    <ul class="uls_page">
      <li class="home" @click="home">首页</li>
      <li class="pre" @click="pret">上一页</li>
      <div class="pagebtn_box">
        <li
          class="page"
          v-for="(items, index) of pages"
          :key="index"
          ref="li"
          @click="pagebtn"
        >
          {{items}}
        </li>
      </div>
      <div class="box">
        <li class="next" @click="next">下一页</li>
        <li class="end" @click="end">尾页</li>
        <li class="pageCount">共{{pageCount}}页</li>
      </div>
    </ul>
  </div>
</template>

<script>
import { fenpage2, pages2 } from 'com/pages'
import { mapState } from 'vuex'
import { searchArticleByTitle } from 'com/shuju'
export default {
  name: 'MyPages',
  props: {
    bbb: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      page: 0
    }
  },
  methods: {
    pret () { // 上一页
      if (!(this.page === 0)) {
        this.page -= 1
        pages2(this.page, this.$refs.li, this.pageCount, 5)
        const data = new FormData()
        data.set('username', this.$route.query.name)
        data.set('size', 9)
        data.set('page', this.page)
        searchArticleByTitle(data, this)
      } else {
        alert('已经是第一页了')
      }
    },
    next () { // 下一页
      if (!(this.page === (this.pageCount - 1))) {
        this.page += 1
        pages2(this.page, this.$refs.li, this.pageCount, 5)
        const data = new FormData()
        data.set('username', this.$route.query.name)
        data.set('size', 9)
        data.set('page', this.page)
        searchArticleByTitle(data, this)
      } else {
        alert('已经是最后一页了')
      }
    },
    end () { // 末页
      if (this.page === this.pageCount - 1) {
        alert('已经是最后一页了')
      } else {
        this.page = this.pageCount - 1
        pages2(this.page, this.$refs.li, this.pageCount, 5)
        const data = new FormData()
        data.set('username', this.$route.query.name)
        data.set('size', 9)
        data.set('page', this.page)
        searchArticleByTitle(data, this)
      }
    },
    home () { // 首页
      this.page = 0
      pages2(this.page, this.$refs.li, this.pageCount, 5)
      const data = new FormData()
      data.set('username', this.$route.query.name)
      data.set('size', 9)
      data.set('page', this.page)
      searchArticleByTitle(data, this)
    },
    pagebtn () { // 页码按钮
      this.page = event.target.innerText - 1
      pages2(this.page, this.$refs.li, this.pageCount, 5)
      const data = new FormData()
      data.set('username', this.$route.query.name)
      data.set('size', 9)
      data.set('page', this.page)
      searchArticleByTitle(data, this)
    }
  },
  computed: {
    ...mapState({
      userArticle: 'myArticle'
    }),
    pages () { // 循环数据得到页码
      var pages = []
      if (this.userArticle) {
        for (var i = 0; i < Math.ceil(this.userArticle.tatal / 9); i++) {
          pages[i] = i + 1
        }
      }
      return pages
    },
    pageCount () { // 总页码
      return this.pages.length
    }
  },
  async mounted () { // 分页效果
    fenpage2(this.$refs.li, this.$refs.li.length)
  },
  async updated () { // 分页效果
    if (this.page <= 3) {
      fenpage2(this.$refs.li, this.$refs.li.length)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .page_box{
    position: absolute
    bottom: 40px
    right: 0
    background-color: rgb(255,255,255)
    width: 900px
    height: 40px
    box-sizing: border-box
    .uls_page{
      width: 100%
      height: auto
      position: relative
      list-style: none
      content:" ";
      display: table;
      clear:both;
      padding: 0
      margin: 0
      li{
        float: left
      }
      li + li{
        margin-left: .2rem
      }
      .pagebtn_box{
        position: absolute
        width: 510px
        height: 40px
        left: 150px
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
        .page{
          background-color: rgb(255,255,255)
          position: absolute
          width: 40px
          height: 40px
          line-height: 40px
          text-align: center
          display: inline-block
          border: 1px solid rgb(190,190,190)
          transition: all .5s
          cursor: pointer
        }
      }
      .page:nth-child(1){
        background-color: rgb(15,113,213)
        color: rgb(255,255,255)
      }
      .box{
        position: absolute
        width: 200px
        height: 30px
        right: 0
      }
      .pageCount{
        margin-top: .23rem
      }
      .next,
      .pre,
      .home,
      .end
      {
        background-color: rgb(255,255,255)
        padding: .2rem
        border: 1px solid rgb(190,190,190)
        cursor: pointer
      }
      .home{
        margin-left: .2rem
      }
      .end:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .next:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .pre:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .page:hover{
        border: 1px solid rgb(15,113,213)
      }
      .end:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .home:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
    }
  }
</style>
